<template>
  <nut-popup 
    :visible="visible" 
    position="bottom" 
    class="hospital-selector-popup"
    :style="{ height: '85%' }"
    @close="handleClose"
  >
    <view class="hospital-selector">
      <!-- 步骤条 -->
      <view class="step-indicator">
        <view 
          v-for="(step, index) in steps" 
          :key="step.key"
          class="step-item"
          :class="{ 
            'active': currentStepIndex === index,
            'completed': currentStepIndex > index 
          }"
        >
          <view class="step-circle">
            <text v-if="currentStepIndex > index" class="step-check">✓</text>
            <text v-else class="step-number">{{ index + 1 }}</text>
          </view>
          <text class="step-label">{{ step.label }}</text>
        </view>
      </view>

      <!-- 已选择的项目展示 -->
      <view class="selected-items" v-if="hasSelectedItems">
        <view class="selected-title">已选择：</view>
        <view class="selected-content">
          <view v-if="selectedHospital" class="selected-item">
            <text class="item-label">医院：</text>
            <text class="item-value">{{ selectedHospital.title }}</text>
          </view>
          <view v-if="selectedTeam" class="selected-item">
            <text class="item-label">部门：</text>
            <text class="item-value">{{ selectedTeam.title || selectedTeam.name }}</text>
          </view>
          <view v-if="selectedDepartment" class="selected-item">
            <text class="item-label">科室：</text>
            <text class="item-value">{{ selectedDepartment.title || selectedDepartment.name }}</text>
          </view>
          <view v-if="selectedProject" class="selected-item">
            <text class="item-label">项目组：</text>
            <text class="item-value">{{ selectedProject.title || selectedProject.name }}</text>
          </view>
        </view>
      </view>

      <!-- 弹窗头部 -->
      <view class="popup-header">
        <text class="popup-title">{{ currentStepTitle }}</text>
        <view class="close-btn" @click="handleClose">
          <text>✕</text>
        </view>
      </view>
      
      <!-- 弹窗内容 -->
      <view class="popup-contents">
        <!-- 筛选框 -->
        <view class="filter-section">
          <view class="filter-input-wrapper">
            <view class="search-icon">
              <text class="icon-text">🔍</text>
            </view>
            <input 
              class="filter-input"
              :placeholder="filterPlaceholder"
              :value="filterText"
              @input="handleFilterInput"
              @focus="handleFilterFocus"
              @blur="handleFilterBlur"
            />
            <view v-if="filterText" class="clear-btn" @click="clearFilter">
              <text class="clear-text">✕</text>
            </view>
          </view>
        </view>

        <!-- 医院选择步骤 -->
        <view v-if="currentStep === 'hospital'" class="selection-content">
          <view v-if="hospitalLoading" class="loading-container">
            <text class="loading-text">正在加载医院列表...</text>
          </view>
          <view v-else-if="filteredHospitalList.length === 0" class="empty-container">
            <text class="empty-text">{{ filterText ? '未找到匹配的医院' : '暂无医院数据' }}</text>
          </view>
          <view v-else class="hospital-list">
            <view 
              v-for="hospital in filteredHospitalList" 
              :key="hospital.key"
              class="hospital-item"
              :class="{ 'selected': isHospitalSelected(hospital) }"
              @click="selectHospital(hospital)"
            >
              <view class="hospital-info">
                <text class="hospital-name">{{ hospital.title }}</text>
                <text class="hospital-address">{{ hospital.address }}</text>
              </view>
              <view v-if="isHospitalSelected(hospital)" class="selected-icon">
                <IconFont name="Check" size="20" color="#3b82f6" />
              </view>
            </view>
          </view>
        </view>

        <!-- 部门选择步骤 -->
        <view v-else-if="currentStep === 'team'" class="selection-content">
          <view v-if="teamLoading" class="loading-container">
            <text class="loading-text">正在加载部门列表...</text>
          </view>
          <view v-else-if="filteredTeamList.length === 0" class="empty-container">
            <text class="empty-text">{{ filterText ? '未找到匹配的部门' : '暂无部门数据' }}</text>
          </view>
          <view v-else class="team-list">
            <view 
              v-for="team in filteredTeamList" 
              :key="team.id"
              class="team-item"
              :class="{ 'selected': isTeamSelected(team) }"
              @click="selectTeam(team)"
            >
              <view class="team-info">
                <text class="team-name">{{ team.title || team.name }}</text>
                <text class="team-desc">{{ team.description || '部门描述' }}</text>
              </view>
              <view v-if="isTeamSelected(team)" class="selected-icon">
                <IconFont name="Check" size="20" color="#3b82f6" />
              </view>
            </view>
          </view>
        </view>
        
        <!-- 科室选择步骤 -->
        <view v-else-if="currentStep === 'department'" class="selection-content">
          <view v-if="departmentLoading" class="loading-container">
            <text class="loading-text">正在加载科室列表...</text>
          </view>
          <view v-else-if="filteredDepartmentList.length === 0" class="empty-container">
            <text class="empty-text">{{ filterText ? '未找到匹配的科室' : '暂无科室数据' }}</text>
          </view>
          <view v-else class="department-list">
            <view 
              v-for="department in filteredDepartmentList" 
              :key="department.id"
              class="department-item"
              :class="{ 'selected': isDepartmentSelected(department) }"
              @click="selectDepartment(department)"
            >
              <view class="department-info">
                <text class="department-name">{{ department.title || department.name }}</text>
                <text class="department-desc">{{ department.description || '科室描述' }}</text>
              </view>
              <view v-if="isDepartmentSelected(department)" class="selected-icon">
                <IconFont name="Check" size="20" color="#3b82f6" />
              </view>
            </view>
          </view>
        </view>

        <!-- 项目组选择步骤 -->
        <view v-else-if="currentStep === 'project'" class="selection-content">
          <view v-if="projectLoading" class="loading-container">
            <text class="loading-text">正在加载项目组列表...</text>
          </view>
          <view v-else-if="filteredProjectList.length === 0" class="empty-container">
            <text class="empty-text">{{ filterText ? '未找到匹配的项目组' : '暂无项目组数据' }}</text>
          </view>
          <view v-else class="project-list">
            <view 
              v-for="project in filteredProjectList" 
              :key="project.id"
              class="project-item"
              :class="{ 'selected': isProjectSelected(project) }"
              @click="selectProject(project)"
            >
              <view class="project-info">
                <text class="project-name">{{ project.title || project.name }}</text>
                <text class="project-desc">{{ project.description || '项目组描述' }}</text>
              </view>
              <view v-if="isProjectSelected(project)" class="selected-icon">
                <IconFont name="Check" size="20" color="#3b82f6" />
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 底部按钮 -->
      <view class="popup-footer">
        <view class="button-group">
          <nut-button 
            v-if="currentStepIndex > 0"
            type="default" 
            class="nav-btn prev-btn"
            @click="goToPreviousStep"
          >
            上一步
          </nut-button>
          <nut-button 
            v-if="currentStepIndex < steps.length - 1"
            type="primary" 
            class="nav-btn next-btn"
            :disabled="!canGoNext"
            @click="goToNextStep"
          >
            下一步
          </nut-button>
          <nut-button 
            v-if="currentStepIndex === steps.length - 1"
            type="primary" 
            class="nav-btn confirm-btn"
            :disabled="!canConfirm"
            @click="handleConfirm"
          >
            确定
          </nut-button>
        </view>
      </view>
    </view>
  </nut-popup>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'
import { request } from '@/service/request'

interface Props {
  /** 弹窗显示状态 */
  visible: boolean
  /** 弹窗标题 */
  title?: string
}

interface Emits {
  /** 更新visible状态事件，用于支持v-model */
  (e: 'update:visible', value: boolean): void
  /** 关闭弹窗事件 */
  (e: 'close'): void
  /** 确认选择事件 */
  (e: 'confirm', data: {
    hospital: any
    department: any
    team: any
    project: any
  }): void
}

const props = withDefaults(defineProps<Props>(), {
  title: '选择医院科室部门项目组'
})

const emit = defineEmits<Emits>()

// 步骤配置
const steps = [
  { key: 'hospital', label: '选择医院' },
  { key: 'team', label: '选择部门' },
  { key: 'department', label: '选择科室' },
  { key: 'project', label: '选择项目组' }
]

// 当前步骤
const currentStep = ref('hospital')
const currentStepIndex = computed(() => {
  return steps.findIndex(step => step.key === currentStep.value)
})

// 当前步骤标题
const currentStepTitle = computed(() => {
  return steps[currentStepIndex.value]?.label || '选择'
})

// 选择状态
const selectedHospital = ref<any>(null)
const selectedDepartment = ref<any>(null)
const selectedTeam = ref<any>(null)
const selectedProject = ref<any>(null)

// 数据列表
const hospitalList = ref<any[]>([])
const departmentList = ref<any[]>([])
const teamList = ref<any[]>([])
const projectList = ref<any[]>([])

// 加载状态
const hospitalLoading = ref(false)
const departmentLoading = ref(false)
const teamLoading = ref(false)
const projectLoading = ref(false)

// 筛选相关状态
const filterText = ref('')
const isFilterFocused = ref(false)

// 计算属性：是否有已选择的项目
const hasSelectedItems = computed(() => {
  return selectedHospital.value || selectedDepartment.value || selectedTeam.value || selectedProject.value
})

// 计算属性：是否可以进入下一步
const canGoNext = computed(() => {
  switch (currentStep.value) {
    case 'hospital':
      return selectedHospital.value !== null
    case 'team':
      return selectedTeam.value !== null
    case 'department':
      return selectedDepartment.value !== null
    case 'project':
      return selectedProject.value !== null
    default:
      return false
  }
})

// 计算属性：是否可以确认
const canConfirm = computed(() => {
  return currentStep.value === 'project' && selectedProject.value !== null
})

// 计算属性：筛选框占位符
const filterPlaceholder = computed(() => {
  switch (currentStep.value) {
    case 'hospital':
      return '搜索医院名称或地址...'
    case 'team':
      return '搜索部门名称...'
    case 'department':
      return '搜索科室名称...'
    case 'project':
      return '搜索项目组名称...'
    default:
      return '搜索...'
  }
})

// 计算属性：筛选后的医院列表
const filteredHospitalList = computed(() => {
  if (!filterText.value.trim()) return hospitalList.value
  
  const keyword = filterText.value.toLowerCase().trim()
  return hospitalList.value.filter(hospital => 
    hospital.title?.toLowerCase().includes(keyword) ||
    hospital.address?.toLowerCase().includes(keyword)
  )
})

// 计算属性：筛选后的科室列表
const filteredDepartmentList = computed(() => {
  if (!filterText.value.trim()) return departmentList.value
  
  const keyword = filterText.value.toLowerCase().trim()
  return departmentList.value.filter(department => 
    (department.title || department.name)?.toLowerCase().includes(keyword) ||
    department.description?.toLowerCase().includes(keyword)
  )
})

// 计算属性：筛选后的部门列表
const filteredTeamList = computed(() => {
  if (!filterText.value.trim()) return teamList.value
  
  const keyword = filterText.value.toLowerCase().trim()
  return teamList.value.filter(team => 
    (team.title || team.name)?.toLowerCase().includes(keyword) ||
    team.description?.toLowerCase().includes(keyword)
  )
})

// 计算属性：筛选后的项目组列表
const filteredProjectList = computed(() => {
  if (!filterText.value.trim()) return projectList.value
  
  const keyword = filterText.value.toLowerCase().trim()
  return projectList.value.filter(project => 
    (project.title || project.name)?.toLowerCase().includes(keyword) ||
    project.description?.toLowerCase().includes(keyword)
  )
})

/**
 * 判断医院是否被选中
 */
const isHospitalSelected = (hospital: any) => {
  if (!selectedHospital.value) return false
  
  // 使用 key 字段进行比较，因为这是医院数据的主要标识符
  const selectedKey = selectedHospital.value.key
  const currentKey = hospital.key
  
  return selectedKey === currentKey
}

/**
 * 判断科室是否被选中
 */
const isDepartmentSelected = (department: any) => {
  if (!selectedDepartment.value) return false
  return selectedDepartment.value.id === department.id
}

/**
 * 判断部门是否被选中
 */
const isTeamSelected = (team: any) => {
  if (!selectedTeam.value) return false
  return selectedTeam.value.id === team.id
}

/**
 * 判断项目组是否被选中
 */
const isProjectSelected = (project: any) => {
  if (!selectedProject.value) return false
  return selectedProject.value.id === project.id
}

/**
 * 选择医院
 */
const selectHospital = async (hospital: any) => {
  selectedHospital.value = hospital
  console.log('选择医院:', hospital)
  
  // 如果有 sysOrgCode，获取对应的医院ID
  if (hospital.sysOrgCode) {
    try {
      const hospitalId = await getHospitalIdByOrgCode(hospital.sysOrgCode)
      console.log('获取到医院ID:', hospitalId)
      // 将医院ID存储到选中医院对象中
      selectedHospital.value = {
        ...hospital,
        hospitalId: hospitalId
      }
    } catch (error) {
      console.error('获取医院ID失败:', error)
    }
  }
  
  // 自动进入下一步
  setTimeout(() => {
    goToNextStep()
  }, 300) // 延迟300ms让用户看到选择效果
}

/**
 * 选择科室
 */
const selectDepartment = (department: any) => {
  selectedDepartment.value = department
  console.log('选择科室:', department)
  
  // 自动进入下一步
  setTimeout(() => {
    goToNextStep()
  }, 300) // 延迟300ms让用户看到选择效果
}

/**
 * 选择部门
 */
const selectTeam = (team: any) => {
  selectedTeam.value = team
  console.log('选择部门:', team)
  
  // 自动进入下一步
  setTimeout(() => {
    goToNextStep()
  }, 300) // 延迟300ms让用户看到选择效果
}

/**
 * 选择项目组
 */
const selectProject = (project: any) => {
  selectedProject.value = project
  console.log('选择项目组:', project)
  
  // 自动确认选择
  setTimeout(() => {
    handleConfirm()
  }, 300) // 延迟300ms让用户看到选择效果
}

/**
 * 进入下一步
 */
const goToNextStep = () => {
  const currentIndex = currentStepIndex.value
  if (currentIndex < steps.length - 1) {
    const nextStep = steps[currentIndex + 1]
    currentStep.value = nextStep.key
    
    // 清空筛选条件
    filterText.value = ''
    
    // 清空下级数据
    clearLowerLevelData(nextStep.key)
    
    // 根据下一步加载对应数据
    loadDataForStep(nextStep.key)
  }
}

/**
 * 返回上一步
 */
const goToPreviousStep = () => {
  const currentIndex = currentStepIndex.value
  if (currentIndex > 0) {
    const prevStep = steps[currentIndex - 1]
    currentStep.value = prevStep.key
    
    // 清空筛选条件
    filterText.value = ''
  }
}

/**
 * 根据 sysOrgCode 获取医院ID
 */
const getHospitalIdByOrgCode = async (orgCode: string) => {
  return new Promise((resolve, reject) => {
    request.get('/sys/sysDepart/getDepartName', {
      orgCode
    }, {
      useErrMsg: true
    }).then(res => {
      console.log("获取医院ID响应:", res)
      const id = res.success?.id
      if (id) {
        resolve(id)
      } else {
        reject(new Error('未获取到医院ID'))
      }
    }).catch(error => {
      console.error("获取医院ID失败:", error)
      reject(error)
    })
  })
}

/**
 * 清空下级数据
 */
const clearLowerLevelData = (currentStepKey: string) => {
  switch (currentStepKey) {
    case 'hospital':
      // 清空所有下级数据
      teamList.value = []
      departmentList.value = []
      projectList.value = []
      selectedTeam.value = null
      selectedDepartment.value = null
      selectedProject.value = null
      break
    case 'team':
      // 清空科室和项目组数据
      departmentList.value = []
      projectList.value = []
      selectedDepartment.value = null
      selectedProject.value = null
      break
    case 'department':
      // 清空项目组数据
      projectList.value = []
      selectedProject.value = null
      break
    case 'project':
      // 项目组是最后一步，无需清空
      break
  }
}

/**
 * 根据步骤加载数据
 */
const loadDataForStep = async (stepKey: string) => {
  switch (stepKey) {
    case 'hospital':
      await loadHospitalList()
      break
    case 'team':
      await loadTeamList()
      break
    case 'department':
      await loadDepartmentList()
      break
    case 'project':
      await loadProjectList()
      break
  }
}

/**
 * 加载医院列表
 */
const loadHospitalList = async () => {
  if (hospitalLoading.value) return
  
  hospitalLoading.value = true
  try {
    const res = await request.get(
      '/nurse_hospital/nurseHospital/loadTreeChildren?pid=0',
      {},
      { useErrMsg: true }
    )
    const records = res.success || []
    hospitalList.value = records || []
    console.log('医院列表加载成功:', hospitalList.value)
  } catch (error) {
    console.error('加载医院列表失败:', error)
    // 提供默认数据
    hospitalList.value = [
      {
        id: '1',
        name: '南宁安好护理站',
        address: '广西南宁市',
        key: '1'
      },
      {
        id: '2', 
        name: '华声护理站',
        address: '广西南宁市',
        key: '2'
      }
    ]
  } finally {
    hospitalLoading.value = false
  }
}

/**
 * 加载科室列表
 */
const loadDepartmentList = async () => {
  if (departmentLoading.value) return
  
  departmentLoading.value = true
  try {
    // 使用选择的部门ID获取科室数据
    const teamId = selectedTeam.value?.id || selectedTeam.value?.key
    console.log('使用部门ID获取科室数据:', teamId)
    
    if (!teamId) {
      console.warn('未选择部门，无法获取科室数据')
      departmentList.value = []
      return
    }
    
    const res = await request.get(
      '/sys/sysDepart/queryDepartTreeSync',
      { pid: teamId },
      { useErrMsg: true }
    )
    
    let records = []
    if (res.success && res.success.records) {
      records = res.success.records
    } else if (res.success && Array.isArray(res.success)) {
      records = res.success
    }
    
    departmentList.value = records || []
    console.log('科室列表加载成功:', departmentList.value)
  } catch (error) {
    console.error('加载科室列表失败:', error)
    // 提供默认数据作为备选
    departmentList.value = [
      { id: '1', name: '内科', description: '内科科室' },
      { id: '2', name: '外科', description: '外科科室' },
      { id: '3', name: '儿科', description: '儿科科室' },
      { id: '4', name: '妇产科', description: '妇产科科室' }
    ]
  } finally {
    departmentLoading.value = false
  }
}

/**
 * 加载部门列表
 */
const loadTeamList = async () => {
  if (teamLoading.value) return
  
  teamLoading.value = true
  try {
    // 使用获取到的医院ID获取部门数据
    const hospitalId = selectedHospital.value?.hospitalId || selectedHospital.value?.id || selectedHospital.value?.key
    console.log('使用医院ID获取部门数据:', hospitalId)
    
    const res = await request.get(
      '/sys/sysDepart/queryDepartTreeSync',
      { pid: hospitalId },
      { useErrMsg: true }
    )
    
    let records = []
    if (res.success && res.success.records) {
      records = res.success.records
    } else if (res.success && Array.isArray(res.success)) {
      records = res.success
    }
    
    teamList.value = records || []
    console.log('部门列表加载成功:', teamList.value)
  } catch (error) {
    console.error('加载部门列表失败:', error)
    // 提供默认数据作为备选
    teamList.value = [
      { id: '1', name: '护理部', description: '护理管理部门' },
      { id: '2', name: '医务部', description: '医务管理部门' },
      { id: '3', name: '行政部', description: '行政管理部门' },
      { id: '4', name: '财务部', description: '财务管理部门' }
    ]
  } finally {
    teamLoading.value = false
  }
}

/**
 * 加载项目组列表
 */
const loadProjectList = async () => {
  if (projectLoading.value) return
  
  projectLoading.value = true
  try {
    // 使用选择的科室ID获取项目组数据
    const departmentId = selectedDepartment.value?.id || selectedDepartment.value?.key
    console.log('使用科室ID获取项目组数据:', departmentId)
    
    if (!departmentId) {
      console.warn('未选择科室，无法获取项目组数据')
      projectList.value = []
      return
    }
    
    const res = await request.get(
      '/sys/sysDepart/queryDepartTreeSync',
      { pid: departmentId },
      { useErrMsg: true }
    )
    
    let records = []
    if (res.success && res.success.records) {
      records = res.success.records
    } else if (res.success && Array.isArray(res.success)) {
      records = res.success
    }
    
    projectList.value = records || []
    console.log('项目组列表加载成功:', projectList.value)
  } catch (error) {
    console.error('加载项目组列表失败:', error)
    // 提供默认数据作为备选
    projectList.value = [
      { id: '1', name: '护理项目组A', description: '专业护理项目组' },
      { id: '2', name: '护理项目组B', description: '康复护理项目组' },
      { id: '3', name: '护理项目组C', description: '老年护理项目组' },
      { id: '4', name: '护理项目组D', description: '儿科护理项目组' }
    ]
  } finally {
    projectLoading.value = false
  }
}

/**
 * 处理确认选择
 */
const handleConfirm = () => {
  emit('confirm', {
    hospital: selectedHospital.value,
    department: selectedDepartment.value,
    team: selectedTeam.value,
    project: selectedProject.value
  })
}

/**
 * 处理关闭弹窗
 */
const handleClose = () => {
  emit('update:visible', false)
  emit('close')
}

/**
 * 处理筛选输入
 */
const handleFilterInput = (event: any) => {
  filterText.value = event.detail.value
}

/**
 * 处理筛选框获得焦点
 */
const handleFilterFocus = () => {
  isFilterFocused.value = true
}

/**
 * 处理筛选框失去焦点
 */
const handleFilterBlur = () => {
  isFilterFocused.value = false
}

/**
 * 清空筛选
 */
const clearFilter = () => {
  filterText.value = ''
}

/**
 * 重置选择状态
 */
const resetSelection = () => {
  selectedHospital.value = null
  selectedDepartment.value = null
  selectedTeam.value = null
  selectedProject.value = null
  currentStep.value = 'hospital'
  
  // 清空数据列表
  hospitalList.value = []
  departmentList.value = []
  teamList.value = []
  projectList.value = []
  
  // 清空筛选
  filterText.value = ''
  isFilterFocused.value = false
}

// 监听弹窗显示状态
watch(() => props.visible, (newVal) => {
  if (newVal) {
    // 弹窗打开时，加载第一步数据
    loadDataForStep('hospital')
  } else {
    // 弹窗关闭时，重置状态
    resetSelection()
  }
})

// 暴露方法给父组件
defineExpose({
  resetSelection
})
</script>

<style scoped lang="scss">
.hospital-selector-popup{
  :deep(.nut-popup){
    border-radius: 50rpx 50rpx 0 0;
    overflow: hidden;
  }

}
.hospital-selector {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: white;
  border-radius: 24rpx 24rpx 0 0; // 顶部圆角
  
  .step-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    background: #f8f9fa;
    border-bottom: 1rpx solid #e9ecef;
    
    .step-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      
      .step-circle {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        background: #e9ecef;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12rpx;
        transition: all 0.3s ease;
        
        .step-number {
          font-size: 24rpx;
          font-weight: bold;
          color: #6c757d;
        }
        
        .step-check {
          font-size: 24rpx;
          color: white;
        }
      }
      
      .step-label {
        font-size: 20rpx;
        color: #6c757d;
        text-align: center;
        line-height: 1.2;
      }
      
      &.active {
        .step-circle {
          background: #3b82f6;
          
          .step-number {
            color: white;
          }
        }
        
        .step-label {
          color: #3b82f6;
          font-weight: 500;
        }
      }
      
      &.completed {
        .step-circle {
          background: #10b981;
        }
        
        .step-label {
          color: #10b981;
        }
      }
    }
  }
  
  .selected-items {
    padding: 24rpx 32rpx;
    background: #f0f9ff;
    border-bottom: 1rpx solid #e0f2fe;
    
    .selected-title {
      font-size: 24rpx;
      color: #0369a1;
      font-weight: 500;
      margin-bottom: 16rpx;
    }
    
    .selected-content {
      display: flex;
      flex-direction: column;
      gap: 8rpx;
      
      .selected-item {
        display: flex;
        align-items: center;
        
        .item-label {
          font-size: 24rpx;
          color: #0369a1;
          margin-right: 8rpx;
        }
        
        .item-value {
          font-size: 24rpx;
          color: #0c4a6e;
          font-weight: 500;
        }
      }
    }
  }
  
  .popup-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32rpx;
    border-bottom: 1rpx solid #f0f0f0;
    position: relative;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .close-btn {
      position: absolute;
      right: 32rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 56rpx;
      height: 56rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40rpx;
      color: #999;
      cursor: pointer;
      
      &:active {
        opacity: 0.6;
      }
    }
  }
  
  .popup-contents {
    flex: 1;
    overflow-y: auto;
    display: block;
    
    .filter-section {
      padding: 24rpx;
      border-bottom: 1rpx solid #f0f0f0;
      background: #fafafa;
      
      .filter-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        background: white;
        border-radius: 12rpx;
        border: 2rpx solid #e9ecef;
        padding: 0 24rpx;
        height: 80rpx;
        transition: all 0.3s ease;
        
        &:focus-within {
          border-color: #3b82f6;
          box-shadow: 0 0 0 4rpx rgba(59, 130, 246, 0.1);
        }
        
        .search-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16rpx;
          flex-shrink: 0;
          width: 32rpx;
          height: 32rpx;
          
          .icon-text {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .filter-input {
          flex: 1;
          height: 100%;
          border: none;
          outline: none;
          font-size: 28rpx;
          color: #333;
          background: transparent;
          height: 60rpx;
          line-height: 60rpx;
          display: flex;
          align-items: center;
          
          &::placeholder {
            color: #999;
            font-size: 28rpx;
          }
        }
        
        .clear-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 16rpx;
          padding: 8rpx;
          cursor: pointer;
          border-radius: 50%;
          width: 32rpx;
          height: 32rpx;
          transition: all 0.2s ease;
          
          .clear-text {
            font-size: 20rpx;
            color: #999;
            line-height: 1;
          }
          
          &:active {
            background: #f0f0f0;
          }
        }
      }
    }
    
    .selection-content {
      padding: 24rpx;
      
      .loading-container, .empty-container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200rpx;
        
        .loading-text, .empty-text {
          font-size: 28rpx;
          color: #666;
        }
      }
    }
  }
  
  .popup-footer {
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    border-top: 1rpx solid #f0f0f0;
    
    .button-group {
      display: flex;
      gap: 16rpx;
      
      .nav-btn {
        flex: 1;
        height: 80rpx;
        border-radius: 12rpx;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &.prev-btn {
          background: #f8f9fa;
          color: #6c757d;
          border: 1rpx solid #dee2e6;
        }
        
        &.next-btn, &.confirm-btn {
          background: #3b82f6;
          color: white;
          border: none;
          
          &:disabled {
            background: #e9ecef;
            color: #6c757d;
          }
        }
      }
    }
  }
}

// 列表样式
.hospital-list, .department-list, .team-list, .project-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.hospital-item, .department-item, .team-item, .project-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
  
  &.selected {
    background: #e3f2fd;
    border-color: #3b82f6;
  }
  
  &:active {
    opacity: 0.8;
  }
  
  .hospital-info, .department-info, .team-info, .project-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8rpx;
    
    .hospital-name, .department-name, .team-name, .project-name {
      font-size: 28rpx;
      font-weight: 500;
      color: #333;
    }
    
    .hospital-address, .department-desc, .team-desc, .project-desc {
      font-size: 24rpx;
      color: #666;
    }
  }
  
  .selected-icon {
    margin-left: 16rpx;
  }
}
</style>